<template>
    <div class="statics-file">
      <el-table :data="formatIndexData" 
      :header-cell-style="tableHeaderColor"
      :span-method="cellMerge1"
      style="width: 100%;" border>
        <el-table-column label="选项名称" prop="item__title" min-width="150" align="left"></el-table-column>
        <el-table-column label="选项内容" prop="content" min-width="180" align="left"></el-table-column>
        <el-table-column label="数量" prop="item_count" min-width="50" align="left"></el-table-column>
      </el-table>
    </div>
</template>
<script>
  import { mapGetters } from 'vuex'
import { parseTime, getFileType, groupBy } from "@/utils/index";
import { getStatistFile } from "@/api/work.js";
import ImageType from '@/components/ImageType'
export default {
  name: "StaticsQuestion",
  components:{
      ImageType
    },
  props:{
    targetId:{
      type: String,
      require: true
    }
  },

  data() {
    return {
      spanArr: [],
      pos: 0,
      dialogFormVisible: false,
      comment: {}, // 点评信息
      abstract: '',
      markId: null,
      formatIndexData:[]
    };
  },
  created() {
    this.fetchMarkInfo()
  },
  methods: {
    fetchMarkInfo() {
        getStatistFile(this.targetId).then(res => {
        const data = res.data.result
        if(!data.length){
            this.$emit('isDataNull', true)
        }
        this.$emit('setResultUUID', res.data.uuid)
        const groupData = groupBy(res.data.result, 'item__title')
        let list = []
        Object.keys(groupData).forEach(
          key =>{
            list = [...list, ...groupData[key]]
          }
        )
        this.getSpanArr(list)
        this.formatIndexData = list
      });
    },
    getSpanArr(data) {　
  for (var i = 0; i < data.length; i++) {
        if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
    if (data[i].item__title === data[i - 1].item__title) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
        }
    }
},
    cellMerge1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 3) {
            const _row = this.spanArr[rowIndex];
            const _col = _row > 0 ? 1 : 0;
            return {
                  rowspan: _row,
                  colspan: _col
            }
      }
},
    // 修改table header的背景色
    tableHeaderColor({ row, rowIndex }) {
    return 'background-color: #f5f5f5;color: #666;'
    },
  }
};
</script>
<style lang="scss">
.statics-file{
  .markname{
    .sendbtn{
      display: none;
    }
    &:hover{
      .sendbtn{
        display: inline-block;
      }
    }
  }
  .fileinfo{

    .toolBox{
      color: #6f6f6f;
      margin-left: 10px;
      display: none;
    }
    &:hover{
      .toolBox{
        display: inline-block;
      }
    }
  }

    .el-button--text{
      padding: 0;
    }
  }
      .el-dialog__body{
        padding: 10px 20px;
      }
</style>
